<template>
  <div class="search-index">
    <header>
      <Header></Header>
    </header>
    <!--   这是搜索页面 -->
    <section>
      <div
        class="search-history"
        v-if='searchArr.length'
      >
        <h2>
          <i class="iconfont">&#xe612;</i>
          <span>历史搜索</span>
          <!-- <span class="clean">清空历史记录</span> -->
          <span @click='deleteStorage'>清空历史记录</span>
        </h2>
        <ul>
          <li
            v-for="(item,index) in searchArr"
            :key='index'
            @click="goSearchList(item)"
          >
            {{item| ellipsis}}
          </li>
        </ul>
      </div>
      <div v-else>暂无搜索记录...</div><!-- v-else 和最近的 v-if 搭配 -->
      <!-- 推荐游戏模块 -->
      <div>
        <h1>
          <i class="iconfont">&#xe617;</i>
          <span>推荐游戏</span>
          <!--           <Like></Like> -->
        </h1>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>


<script>
import Tabbar from "../../components/common/Tabbar.vue";
import Like from "../../components/home/Like.vue";
import Header from "../../components/search/Hander.vue";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      searchArr: [],
    };
  },
  components: {
    Tabbar,
    Header,
    Like,
  },
  /* created写在方法里面是调用，写在外面是直接加载运行？ */
  created() {
    /* 下面这个用法||处理细节很重要获取不到了要重新定义数组 */
    this.searchArr = JSON.parse(localStorage.getItem("searchList")) || [];
    /* vue.runtime.esm.js?c320:619 
       [Vue warn]: Error in created hook: "ReferenceError: searchArr is not defined"
found in
 searchArr is not defined" 出现这个原因是没有写this 导致找不到变量和无法使用hook
 */
    /*     console.log(111) */
  },
  methods: {
    deleteStorage() {
      MessageBox({
        title: "提示",
        message: "确定执行此操作?",
        showCancelButton: true,
      }).then((res) => {
        /* console.log(res);res返回confirm和cancel可以做判断 */
        if (res == "confirm") {
          localStorage.removeItem(
            "searchList"
          ); /* 删除本地存储，但是无法实现即时显示，所以需要下面的一步 */
          this.searchArr = [];
        }
      });
    },
    //点击历史搜索，进入搜索结果页面
    goSearchList(item) {
      /* console.log(item); */
      this.$router.push({
        /* path: "/search/list", */
        name: "list",
        query: {
          key: item,
        },
      });
    },
  },
  /* 字数大于10 处理 */
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
};
</script>


<style scoped>
span {
  caret-color: transparent; /* 点击span的时候不显示光标 */
}
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  flex: 1;
  /* ，flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。 */
  overflow: hidden;
  background-color: #f5f5f5;
}
.search-history {
  padding: 1% 5%;
}
.search-history h2 {
  font-size: 24px;
  font-weight: 600;
}
h1 {
  font-size: 24px;
  font-weight: 600;
}
/* .clean {
  display: block;
  float: right;
} */
.search-history h2 span:last-child {
  /* display: inline-block; */
  text-align: right;
  float: right;
}
.search-history h2 i,
h1 i {
  font-size: 100%;
  color: red;
  padding-right: 5px;
}
.search-history ul {
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap; /* 拆行或者拆列 */
}
.search-history ul li {
  padding: 2px 2px;
  margin: 2px;
  font-size: 22px;
  border: 1px solid #ccc;
}
</style>